<%@page language="java" import="cn.com.wxd.util.service.ProjectInfo" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>
<!DOCTYPE html>
<head>
    <base href="<%=basePath %>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css"
          href="static/util/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="static/util/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css"
          href="static/util/css/loaders.min.css"/>
    <title>用户注册</title>
    <script type="text/javascript" src="static/js/jquery1-11-3.min.js"></script>
    <style type="text/css">
        /**
         *这些样式用于调整动态图标的位置和样式
        **/
        #loader > div {
            background-color: #494949;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="margin-top:100px;">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" style="color:cadetblue;font-size:20px;">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;用户注册
                    </h3>
                </div>
                <div class="panel-body">
                    <ul id="regTypeTable" class="nav nav-tabs">
                        <li style="width:50%;" class="active"><a id="phoneTabId"
                                                                 href="#Regtabp" data-toggle="tab" role="phone"
                                                                 style="font-size:18px;">
                            <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>&nbsp;手机注册</a>
                        </li>
                        <li style="width:50%;"><a id="emailTabId" href="#Regtabp"
                                                  data-toggle="tab" role="email" style="font-size:18px;">
                            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp;邮箱注册</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <form class=".form-horizontal" action="#" onsubmit="return false;">
                            <div class="form-group" style="margin-top: 50px;">
                                <input type="hidden" id="regtype" name="regtype" value="phone"/>
                            </div>
                            <div class="form-group" style="min-height:40px;">
                                <label for="userNamelab" class="col-sm-2 control-label" id="userNamelab"
                                       style="color:#99CC99;font-size:18px">手机号</label>
                                <div class="col-sm-10">
                                    <input type="tel" class="form-control" id="userName"
                                           placeholder="phone" required="required" maxlength="15"/>
                                </div>
                            </div>
                            <div class="form-group" style="min-height:40px;">
                                <label for="nickNamelab" class="col-sm-2 control-label" id="nickNamelab"
                                       style="color:#99CC99;font-size:18px">昵&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="nickName"
                                           placeholder="nickname" maxlength="12" required="required"/>
                                </div>
                            </div>
                            <div class="form-group" style="min-height:40px;">
                                <label for="passwordlab" class="col-sm-2 control-label" id="passwordlab"
                                       style="color:#99CC99;font-size:18px">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="password"
                                           placeholder="password" maxlength="18" required="required"/>
                                </div>
                            </div>
                            <div class="form-group" style="min-height:40px;">
                                <label for="repasswordlab" class="col-sm-2 control-label" id="repasswordlab"
                                       style="color:#99CC99;font-size:18px">重复密码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="repassword"
                                           placeholder="repassword" maxlength="18" required="required"/>
                                </div>
                            </div>
                            <div class="form-group" style="min-height:40px;">
                                <label for="vercodepiclab" class="col-sm-2 control-label" id="vercodepiclab"
                                       style="color:#99CC99;font-size:14px">图片验证码</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="vercodepic"
                                           placeholder="Image Verification code" maxlength="4" required="required"/>
                                </div>
                                <div class="col-sm-5">
                                    <img id='varcodeimg' alt='点击切换图片' title='点击切换图片'
                                         style='width:85px;height:25px' border='0'
                                         onclick="changeVercode('#varcodeimg','#errorMessage')"
                                         src="vercode/vercodeQQ"
                                    />
                                    <a href="javascript:changeVercode('#varcodeimg','#errorMessage')"
                                        style="margin-left: 10px;font-size: 12px;" tabIndex="-1">换一下</a>
                                </div>
                            </div>
                            <div class="form-group" style="min-height:40px;">
                                <label for="vercodedynlab" class="col-sm-2 control-label" id="vercodedynlab"
                                       style="color:#99CC99;font-size:14px">动态验证码</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="vercodedyn"
                                           placeholder="Dynamic verifiable code" maxlength="6" required="required"/>
                                </div>
                                <div class="col-sm-5">
                                    <button id="vercodedynBtn" type="button" onclick="sentVercode(this)"
                                            class="btn btn-info btn-sm" style="width:60%">免费获取手机验证码
                                    </button>
                                </div>
                            </div>
                            <div class="form-group" style="min-height:20px;">
                                <div class="col-sm-3">
                                </div>
                                <div class="col-sm-6">
                                    <input id="tongyixieyi" style="margin-left: 20%;float:left;" type="checkbox">
                                    <a style="margin-left: 10px;font-size: smaller;display: block;float: left;"
                                       href="userAgreement.html" target="_blank">
                                        同意<%=ProjectInfo.getCompanyName() %>用户协议</a>
                                </div>
                                <div class="col-sm-3">
                                </div>
                            </div>
                            <div class="form-group" style="min-height:20px;">
                                <div class="col-sm-3">
                                </div>
                                <div id="errorMessage" class="col-sm-6" style="color:red;">
                                </div>
                                <div class="col-sm-3">
                                </div>
                            </div>
                            <div class="form-group" style="min-height:40px;">
                                <div class="col-sm-3">
                                </div>
                                <div class="col-sm-6" id="regBtn">
                                    <button id="regBtnbtn" type="button" style="width:60%;margin-left: 50px;"
                                            onclick="registSubmit()" class="btn btn-info">注册
                                    </button>
                                </div>
                                <div class="col-sm-3">
                                    <a href="login"
                                       style="font-size: 12px;display:block;    line-height: 30px;">我有账号!去登陆</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
<script type="text/javascript" src="static/js/backgroundimg.min.js"></script>
<script type="text/javascript" src="static/js/base64.min.js"></script>
<script type="text/javascript" src="static/js/changevercode.js"></script>
<script type="text/javascript" src="static/util/js/bootstrap3-3-5.min.js"></script>
<script type="text/javascript">
    var successReturnPage = ""; //注册成功返回的页面
    $(function () {
        $('#regTypeTable a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
            var type = $(this).attr("role");
            if (type == "phone") {
                $("#userNamelab").text("手机号");
                $("#userName").attr("placeholder", "phone").attr("maxlength", "15").attr("type", "tel").val("");
                $("#regtype").val("phone");
                $("#vercodedynBtn").text("免费获取手机验证码");
            } else {
                $("#userNamelab").text("邮	箱");
                $("#userName").attr("placeholder", "email").attr("maxlength", "36").attr("type", "email").val("");
                $("#regtype").val("email");
                $("#vercodedynBtn").text("发送验证码到邮箱");
            }
        });
        //按回车键提交表单
        $("body").keydown(function (event) {
            if (event.keyCode == "13") {//keyCode=13是回车键
                $('#regBtnbtn').click();
            }
        });
        //默认焦点输入用户名
        document.getElementById("userName").focus();
    });
    function sentVercode(o) {
        o = $(o);
        var type = $("#regtype").val();
        if (type == "") {
            return;
        }
        $("#registmodelMessage").text("");
        var wait = 60;
        var varcode = $("#vercodepic").val();
        var username = $("#userName").val();
        if (username == "" || username.length < 6) {
            $("#errorMessage").text("请输入正确的手机或邮箱！");
            return;
        }
        if (type == "phone") {
            var telReg = !!username.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
            //如果手机号码不能通过验证
            if (telReg == false) {
                $("#errorMessage").text("手机号码不正确");
                return;
            }
        } else {
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (!filter.test(username)) {
                $("#errorMessage").text("邮箱格式不正确");
                return;
            }
        }

        if (varcode == "" || varcode.length < 4) {
            $("#errorMessage").text("图片验证码错误！");
            return;
        } else {
            o.attr("disabled", "disabled");
            o.text("请稍后...");
            var result = sentVercodeAjax(varcode, username, type);
            if (result) {  //如果发送成功，加入定时器
                //如果发送失败，不做任何操作
                o.text("重新发送(" + wait + ")");
                wait--;
                var dingshiqi = setInterval(function () {
                    o.attr("disabled", "disabled");
                    o.text("重新发送(" + wait + ")");
                    wait--;
                    if (wait < 0) {
                        //clearInterval(dingshitime);
                        o.removeAttr("disabled");
                        if (type == "phone") {
                            o.text("免费获取手机验证码");
                        } else {
                            o.text("发送验证码到邮箱");
                        }
                        clearInterval(dingshiqi);  //停止计时器
                        wait = 60;
                    }
                }, 1000);
            } else {
                o.removeAttr("disabled");
            }
        }
    }
    function sentVercodeAjax(varcode, userName, type) {
        var action = "";
        if (type == "phone") {
            action = "user/dynamicPhonecode/regist";
        } else if (type == "email") {
            action = "user/dynamicEmailcode/regist";
        } else {
            return false;
        }
        var boolresult = false;
        $.ajax({
            type: "post",
            url: action,
            data: {
                "userName": userName,
                "verCode": varcode
            },
            async: false,//false代表只有在等待ajax执行完毕后才执行之后的语句
            success: function (result) {  //result -3 验证码不正确   -2用户名不正确   -1连续1分钟之内发送		0成功	1失败
                if (result.errNo == 0) {
                    boolresult = true;
                } else {
                    $("#errorMessage").text(result.message);
                }
            }
        });
        return boolresult;
    }
    function registSubmit() {
        $("#errorMessage").text("");
        var registuserName = $("#userName").val();
        var RepassWordMW = $("#repassword").val();
        var registvarCode = $("#vercodepic").val();
        var registpassWordMW = $("#password").val();
        var nickName = $("#nickName").val();
        var passWord = "";
        var regtype = $("#regtype").val();
        var istongyi = $("#tongyixieyi").is(':checked');
        if (registuserName == "") {
            $("#errorMessage").text("用户名不能为空！");
            return;
        }
        if (registuserName.length < 6) {
            $("#errorMessage").text("用户名长度不能小于6！");
            return;
        }
        if (nickName == "") {
            $("#errorMessage").text("昵称不能为空！");
            return;
        }
        if (nickName.length > 12) {
            $("#errorMessage").text("昵称不能超过12个字符！");
            return;
        }
        if (registpassWordMW == "") {
            $("#errorMessage").text("密码不能为空！");
            return;
        }
        if (registpassWordMW.length < 6) {
            $("#errorMessage").text("密码太短！");
            return;
        }
        if (RepassWordMW != registpassWordMW) {
            $("#errorMessage").text("两次输入密码不一致！");
            return;
        }
        if (registvarCode.length != 4) {
            $("#errorMessage").text("验证码不正确！");
            return;
        }


        if (regtype == "phone") {
            if ($("#vercodedyn") == "") {
                $("#errorMessage").text("请输入手机验证码");
                return;
            }
            var telReg = !!registuserName.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
            //如果手机号码不能通过验证
            if (telReg == false) {
                $("#errorMessage").text("手机号码不正确");
                return;
            }
        }
        if (regtype == "email") {
            if ($("#vercodedyn") == "") {
                $("#errorMessage").text("请输入邮箱验证码");
                return;
            }
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (!filter.test(registuserName)) {
                $("#errorMessage").text("邮箱格式不正确");
                return;
            }
        }
        if (istongyi == false) {
            $("#errorMessage").text("同意用户协议!");
            return;
        }
        if (regtype == "") {
            $("#errorMessage").text("发生错误!刷新后再试");
            return;
        }
        try {
            passWord = encode64(registpassWordMW);  //进行加密
        } catch (e) {
            $("#errorMessage").text("发生未知错误！");
            return;
        }
        $("#regBtn").html("<div id=\"loader\" class=\"loader-inner ball-pulse\"><div></div><div></div><div></div></div>");
        registAjax(registuserName, passWord, nickName, registvarCode, regtype, $("#vercodedyn").val(), $("#vercodedyn").val());
    }
    function registAjax(registuserName, passWord, nickName, registvarCode, regtype, verphone, veremail) {
        $.ajax({
            type: "post",
            url: "user/ajaxRegist",
            data: {
                "userName": registuserName,
                "password": passWord,
                "nickName": nickName,
                "verCode": registvarCode,
                "rePassword": passWord,
                "registType": regtype,
                "verPhone": verphone,
                "verEmail": veremail
            },
            success: function (result) {
                var jsonobj = result;
                if (jsonobj.errNo != 0) {
                    $("#errorMessage").text(jsonobj.message);
                    $("#regBtn").html("<button id=\"regBtnbtn\" style=\"width:60%;margin-left: 50px;\" " +
                        "onclick=\"registSubmit()\" class=\"btn btn-info\">注册</button>");
                    changeVercode('#varcodeimg'); //刷新验证码
                } else {
                    window.location.href = successReturnPage;
                }
            }
        });
    }
</script>
</html>